<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成文件夹下所有图片的缩略图</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/axios.min.js"></script>
</head>
<body>
    <header>生成文件夹下所有图片的缩略图</header>
    <main>
        <div class="test-item"><a href="./index.html">返回</a></div>
        <p style="padding-left:10px;">该示例是实现了将指定的文件夹下所有图片文件生成指定最大范围大小的缩略图，并指定缩略图的类型为jpg类型。</p>
        <div class="option-box">
            <div class="option-title">参数设置</div>
            <div class="option-item">
                <label for="dirPath">文件夹路径</label>
                <input id="dirPath" type="text" placeholder="文件夹路径"/>
            </div>
            <div class="option-item">
                <label for="widthPix">最大宽度（像素）</label>
                <input id="widthPix" type="Number" placeholder="最大宽度"/>
            </div>
            <div class="option-item">
                <label for="heightPix">最大高度（像素）</label>
                <input id="heightPix" type="Number" placeholder="最大高度"/>
            </div>
            <div class="option-item">
                <label for="imageType">缩略图类型</label>
                <input id="imageType" type="text" placeholder="jpg 或 png"/>
            </div>
        </div>
        <button id="reset">重置</button>
        <button id="submit">提交</button>
        <div class="option-box" id="responseBox">
            <div class="option-title">请求响应</div>
            <div class="option-item">
                <label for="status">请求状态</label>
                <span id="status"></span>
            </div>
            <div class="option-item">
                <label for="message">消息提示</label>
                <span id="message"></span>
            </div>
            <div class="option-item">
                <label for="responseData">响应数据</label>
                <span id="responseData"></span>
            </div>
        </div>
    </main>
    <script>
        function getEle(eleId){
            return document.getElementById(eleId);
        }
        getEle('responseBox').style.display="none";
        getEle('reset').addEventListener('click',()=>{
            getEle('dirPath').value = '';
            getEle('widthPix').value = '';
            getEle('heightPix').value = '';
            getEle('imageType').value = '';
        })
        getEle('submit').addEventListener('click',()=>{
            let dirPath = getEle('dirPath').value;
            let widthPix = getEle('widthPix').value;
            let heightPix = getEle('heightPix').value;
            let imageType = getEle('imageType').value;
            axios.get('/thumbnailator-study/processing/generateThumbnail', {params: {dirPath: dirPath, widthPix: widthPix, heightPix:heightPix, imageType:imageType}}).then(res=>{
                getEle('responseBox').style.display="block";
                console.log(res);
                getEle('status').innerHTML=res.data.status;
                getEle('message').innerHTML=res.data.message;
                getEle('responseData').innerHTML=res.data.data==null?'暂无数据':res.data.data;
            })
        })
    </script>
</body>
</html>